<template>
    <a-modal :visible="visible" @ok="handleOk" @cancel="closeModal">
      <template #title>
            {{ modalType === 'add' ? '新增用户' : '编辑用户' }}
        </template>
        <div>
   
            <XForm :config="formConfig" ref="xFormRef" style="width: 100%">
                <template #parentId="scoped">
               
          
                </template>
            </XForm>
        </div>
    <div></div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, defineProps,defineEmits,watch, computed } from 'vue'
import type { PropType } from 'vue'
import XForm, { useFormHook } from '@/components/common/x-form/index.ts'
import type { FormPropsType } from '@/components/common/x-form/index.ts'
import { assign, cloneDeep,merge,mergeWith} from 'lodash'
import UserApi from '@/api/user/UserApi'
import RoleApi from '@/api/system/role/RoleApi'
let props=defineProps({
  visible:{
    type:Boolean,
    default:false
  },
  modalType:{
    type:String,
    default:'add' 
  },
  user:{
    type:Object as PropType<UserType.User | null>,
    default:()=>{} 
  }
})
let emits=defineEmits(['update:visible','submit'])


const xFormRef = ref()

const formConfig = ref<FormPropsType>({
    autoLabelWidth: true,
    items: {
      username: {
            type: 'input',
            config: {
                label: '用户名称',
                rules: [{ required: true, message: 'menuName is required' }],
                style: {},
                feedback:true
            },
            slotFormConfig: {
                modelValue:  (props.user as UserType.User)?.username || ''
            }
        },
        roles: {
            type: "select",
            config: {
                label: '所属角色',
                rules: [{ required: true, message: 'type is required' }],
                style: {},
                feedback:true,
            },
            slotFormConfig: {
                modelValue: [],
                multiple:true,
                options: [
                  
                ]
            }
        },
    }
})

let [formData,setFormItemValue] = useFormHook(formConfig)
watch(()=>props.user,()=>{
    if(props.user){
     UserApi.getUserInfoById(props.user.userId).then(res=>{
        if(res.code == 200){
            console.log(res.data.roles.map((item:any)=>item.roleId))
      
            setFormItemValue([{
              key:'username',
              value:res.data.username
            },{
              key:'roles',
              value:res.data.roles.map((item:any)=>item.roleId)
            }])
        }
     }) 
    }
})


//获取角色列表
function getAllRoleList(){
 RoleApi.getAllRoleList(1,10000).then(res=>{
    if(res.code == 200){
      formConfig.value.items.roles.slotFormConfig.options=res.data.list.map((item:any)=>{
        return {
          label:item.roleName,
          value:item.roleId
        }
      })
    }
 }) 
}
getAllRoleList()

function handleOk(){
    xFormRef.value.FormRef.validate().then((res:any)=>{
        if(!res){
          let saveUserInfo=cloneDeep(formData.value)
          saveUserInfo.userId=props.user!.userId
          
          saveUserInfo.roles=saveUserInfo.roles.map((item:any)=>{
            return {
              roleId:item,
              roleName:''
            }
          })
          UserApi.saveUserInfoByUserId(saveUserInfo).then(res=>{
            if(res.code == 200){
              emits("update:visible",false)
              emits("submit")
            }
          })

        }
    })
}

function closeModal() {
    emits("update:visible",false) 
 
}
</script>
<style scoped lang="scss">
.editUserInfoDialog{

}
</style>